import React, { useEffect, useState } from 'react'
// import MyTable from '@/components/MyTable'
import { reqBrandList, type Brand, type ApiResponse } from '@/api/brand'
import { Table, Button, type TableProps } from 'antd'
type TableRowSelection<T extends object = object> =
  TableProps<T>['rowSelection']
type TablePagination<T extends object> = NonNullable<
  Exclude<TableProps<T>['pagination'], boolean>
>
type TablePaginationPosition<T extends object> = NonNullable<
  TablePagination<T>['position']
>[number]

interface DataType {
  id: number
  bName: string
}

const BrandIndex: React.FC = () => {
  const [dataSource, SetDataSource] = useState<Brand[]>()
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const [bottom, setBottom] =
    useState<TablePaginationPosition<DataType>>('bottomCenter')
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '品牌名称',
      dataIndex: 'bName',
      key: 'bName'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <Button type="primary">编辑</Button>
          <Button
            type="primary"
            danger
            onClick={() => {
              delData(record.id)
            }}
          >
            删除
          </Button>
        </>
      )
    }
  ]

  useEffect(() => {
    getBrandList()
  }, [])

  const delData = async (id: number) => {
    console.log(id)

    // const res: ApiResponse<Brand[]> = await reqBrandList()
    // console.log(res)
    // SetDataSource(res.data)
  }

  const getBrandList = async () => {
    const res: ApiResponse<Brand[]> = await reqBrandList()
    console.log(res)
    SetDataSource(res.data)
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange
  }
  return (
    <div>
      <h3>品牌页面</h3>

      <Table<DataType>
        bordered={true}
        rowKey={(record) => record.id}
        dataSource={dataSource}
        columns={columns}
        rowSelection={rowSelection}
        pagination={{
          defaultCurrent: 1,
          defaultPageSize: 3,
          total: 6,
          pageSizeOptions: [2, 3, 4, 5, 6],
          showSizeChanger: true,
          showQuickJumper: true,
          position: ['bottomCenter']
        }}
      />
    </div>
  )
}

export default BrandIndex
